<template>
  <div class="contaiier">
    <div class="screen" ref="screen">
      <div class="top">
        <div class="tleft">
          <div class="btn" @click="goHome">首页</div>
        </div>
        <div class="center">可 视 化 大 数 据 视 频 平 台</div>
        <div class="tright">
          <div class="btn">统计报告</div>
          <div>当前时间:{{ currentTime }}</div>
        </div>
      </div>
      <div class="bottom">
        <div class="bleft">
          <Touris class="tourist"  />
          <Sex class="sex" />
          <Age class="age" />
        </div>
        <div class="center">
          <Map class="map" />
          <Line class="line" />
        </div>
        <div class="bright">
          <Rank class="rank" />
          <Year class="year" />
          <Counter class="counter" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import moment from 'moment'
import { useRouter } from 'vue-router';

//左侧组件
import Touris from '@/components/screen/Touris.vue'
import Sex from '@/components/screen/Sex.vue'
import Age from '@/components/screen/Age.vue'

import Rank from '@/components/screen/Rank.vue'
import Year from '@/components/screen/Year.vue'
import Counter from '@/components/screen/Counter.vue'

import Map from '@/components/screen/Map.vue'
import Line from '@/components/screen/Line.vue'

let $router = useRouter()

let screen = ref()
let timers = ref(null)
let currentTime = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'))

//获取大屏的缩放比例
let getScale = (w = 1920, h = 1080) => {
  let ww = window.innerWidth / w
  let wh = window.innerHeight / h
  console.log(ww,wh,'ww-----wh')
  return ww < wh ? ww : wh
}

let scale = reactive({
  width: '1',
  height: '1'
})



// * 设计稿尺寸（px）
const baseWidth = ref(1920) 
const baseHeight = ref(1080)
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth.value / baseHeight.value).toFixed(5))


//缩放的第二种方式
let getScale2 = (dom:any) =>{
      //拿到整个页面元素
      const appRef = dom
      //如果没有值就结束
      if (!appRef) return 
      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      //判断：如果有值代表页面变化了
      if (appRef) {
        //判断当前宽高比例是否大于默认比例
        if (currentRate > baseProportion) {
          // 如果大于代表更宽了，就是放大了
          //那么把默认缩放的宽高改为：同比例放大
          scale.width = ((window.innerHeight * baseProportion) / baseWidth.value).toFixed(5)
          scale.height = (window.innerHeight / baseHeight.value).toFixed(5)
          console.log(scale.width,scale.height,'放大');
          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        } else {
          // 如果不大于默认比例代表缩小了。
          //那么把默认缩放的宽高改为：同比例缩小
          scale.height = ((window.innerWidth / baseProportion) / baseHeight.value).toFixed(5)
          scale.width = (window.innerWidth / baseWidth.value).toFixed(5)
          console.log(scale.width,scale.height,'缩小');
          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        }
      }
    }

let goHome = ()=>{
  $router.push('/')
}

//监听视口的变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  // getScale2(screen.value) //方案2
}

onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  timers.value = setInterval(() => {
    currentTime.value = moment().format('YYYY年MM月DD日 hh:mm:ss')
  }, 1000)
  
  // getScale2(screen.value)//方案2

})


//卸载组件时清除定时器
onBeforeUnmount(() => {
  clearInterval(timers.value)
})


</script>

<style scoped lang="less">
.contaiier {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/images/screen/bg.png') no-repeat;
  background-size: cover;

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;

    .top {
      width: 100%;
      height: 50px;
      display: flex;

      .tleft {
        flex: 1.2;
        background: url('@/assets/images/screen/dataScreen-header-left-bg.png') no-repeat;
        background-size: 100% 100%;
        height: 50px;
        color: #29fcff;
        font-size: 20px;

        .btn {
          cursor: pointer;
          width: 150px;
          height: 50px;
          background: url('@/assets/images/screen/dataScreen-header-btn-bg-l.png') no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 50px;
        }

        display: flex;
        align-items: center;
        justify-content:end;
      }

      .center {
        color: #29fcff;
        font-size: 30px;
        text-align: center;
        flex: 2;
        width: 100%;
        background: url('@/assets/images/screen/dataScreen-header-center-bg.png') no-repeat;
        background-size: 100% 100%;
        height: 75px;
        line-height: 75px;
      }

      .tright {
        width: 100%;
        background: url('@/assets/images/screen/dataScreen-header-right-bg.png') no-repeat;
        background-size: 100% 100%;
        flex: 1.2;
        height: 50px;
        color: #29fcff;
        font-size: 20px;
        display: flex;
        align-items: center;

        .btn {
          width: 150px;
          height: 50px;
          background: url('@/assets/images/screen/dataScreen-header-btn-bg-r.png') no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 50px;
          margin-right: 10px;
        }
      }

    }
    .bottom{
      display: flex;
      .bleft {
        height: 1030px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .tourist {
          margin: 20px;
          flex: 1.5;
        }
        .sex {
          margin: 0 20px;
          flex: 1;
        }
        .age {
          margin: 20px;
          flex: 1;
        }
      }
      .center{
        flex: 2;
        display: flex;
        flex-direction: column;
        .map{
           flex: 3.5;
        }
        .line{
          flex: 1.5;
        }
      }
      .bright{
        flex: 1;
        display: flex;
        flex-direction: column;
        .rank {
          margin: 20px;
          flex: 1.5;
        }
        .year {
          margin: 0 20px;
          flex: 1;
        }
        .counter {
          margin: 20px 20px 0 20px;
          flex: 1;
        }
      }

    }
  }
}
</style>